{% extends 'base.html' %}

{% block content %}
    <div class="container">
     <div class="panel panel-default panel-primary">
          <div class="panel-heading">
            <h3 class="panel-title"><span class="glyphicon glyphicon-open" aria-hidden="true"></span>{{ title }}</h3>
          </div>
      <div class="panel-body">
                 {#     novalidate取消网页默认的提示           #}
         <form class="form-horizontal" method="post" enctype="multipart/form-data" novalidate style="margin: 10px 10px">
              {% csrf_token %}
             {% for item in form %}
             <div class="form-group">
                  <label>{{ item.label }}:</label>
                       {{ item }}

                    <span style="color:red;">{{ item.errors.0 }}</span>
              </div>
             {% endfor %}
             <p style="margin-left:-14px ">(只能上传jpg/png格式的图片)</p>
              <button type="submit" class="btn btn-primary" onclick="test();">提 交</button>
          </form>
      </div>
     </div>
     <div class="bs-example" data-example-id="simple-thumbnails">
        <div class="row">
         {% for i in do %}
          <div class="col-xs-6 col-md-3">
              <div class="panel panel-default panel-primary">
                  <div class="panel-body">
                      <a href="#" class="thumbnail">
                      <img data-src="holder.js/100%x180" alt="100%x180" style="height: 180px; width: 100%; display: block;" src="http://127.0.0.1:8000/{{ i.img }}" data-holder-rendered="true">
                    </a>
                    <h3 style="text-align: center">名称：{{ i.name }}</h3>
                    <p style="text-align: center">{{ i.age }}</p>
                  </div>
              </div>
          </div>
         {% endfor %}
        </div>
     </div>

    </div>
{% endblock %}

{% block js %}
<script>
   function test(){
       var i ='上传成功';
       alert(i);
      //刷新页面
       location.reload();
   }
</script>
{% endblock %}